<template>
    <div class="container">
        <div class="flex-container">
            <div class="flex-item">
                <el-select v-model="options.mode" placeholder="提现状态">
                    <el-option v-for="item in options.modeItems" :key="item.sign" :label="item.name"
                               :value="item.sign"/>
                </el-select>
            </div>
        </div>
        <el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
            <el-table-column prop="txnumber" label="订单号"/>
            <el-table-column prop="zhicheng" label="用户名称"/>
            <el-table-column prop="bankname" label="开户行"/>
            <el-table-column prop="bankcard" label="银行卡号"/>
            <el-table-column prop="username" label="姓名"/>
            <el-table-column prop="price" label="提现金额"/>
            <el-table-column prop="status" label="提现状态">
                <template slot-scope="scope">
                    {{scope.row.status==0?"审核驳回":scope.row.status==1?"待审核":scope.row.status==2?"审核通过":""}}
                    <div v-if="scope.row.status==0" style="color: red;font-size: 12px">驳回原因：{{scope.row.remark}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="提现时间"/>
            <el-table-column label="转账凭证">
                <template slot-scope="scope">
                    <img :src="curSureRow.host+scope.row.pic" style="width: 50px;height: 50px" v-if="scope.row.pic"/>
                    <div v-if="scope.row.status==2&&scope.row.remark">备注：{{scope.row.remark}}</div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="sureTixian(scope.row.id)" type="text"
                               :disabled="scope.row.status==1?false:true" size="small">同意
                    </el-button>
                    <el-button @click.native.prevent="rejectApply( scope.row.id)" type="text"
                               size="small" :disabled="scope.row.status==1?false:true">驳回
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
            :page-sizes="[10, 50, 100, 200, 300]"
            layout="total, sizes, prev, pager, next, jumper"
        />


        <el-dialog
            title="审核通过"
            :visible.sync="dialogVisible"
            width="50%">
            <div class="van-row--flex">
                上传凭证：
                <el-upload
                    class="avatar-uploader"
                    action="/api/file/pic"
                    :show-file-list="false"
                    :data="data"
                    name="image"
                    :on-success="handleAvatarSuccess">
                    <img v-if="curSureRow.url" :src="curSureRow.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="van-row--flex  " style="margin-top: 10px">
                审核备注：
                <el-input placeholder="请输入备注" v-model="curSureRow.remark" type="textarea"
                          style="width: 350px"></el-input>
            </div>
            <span slot="footer">
            <el-button @click="dialogClose(false)">取 消</el-button>
            <el-button type="primary" @click="dialogClose(true)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        Table, TableColumn, Pagination,
        Button, Select, Option,
        Drawer, Dialog, Input,
        MessageBox, Message, Upload, Icon
    } from 'element-ui';

    export default {
        components: {
            [Table.name]: Table,
            [TableColumn.name]: TableColumn,
            [Pagination.name]: Pagination,
            [Button.name]: Button,
            [Input.name]: Input,
            [Select.name]: Select,
            [Option.name]: Option,
            [Drawer.name]: Drawer,
            [Dialog.name]: Dialog,
            [MessageBox.name]: MessageBox,
            [Upload.name]: Upload,
            [Icon.name]: Icon,
        },
        data() {
            return {
                options: {
                    mode: '',
                    modeItems: [
                        {
                            name: '全部', sign: ""
                        }, {
                            name: '驳回', sign: 0
                        },
                        {
                            name: '待审核', sign: 1
                        },
                        {
                            name: '审核通过', sign: 2
                        },

                    ]
                },
                dataset: {
                    loading: false,
                    total: 0, limit: 10, page: 1,
                    items: []
                },
                curSureRow: {
                    id: "",
                    url: "",
                    remark: "",
                    host: "http://lj.hbweipai.com"
                },
                dialogVisible: false,
                data: {token: ""}
            }
        },
        mounted() {
            this.controllerRequestListDataset();
            this.data.token = this.$store.state.options.user.token
        },
        methods: {
            sureTixian(id) {
                this.dialogVisible = true;
                this.curSureRow.id = id
            },
            dialogClose(status) {
                let _this = this;
                if (status) {
                    /* if (!this.curSureRow.url) {
                         Message.warning("请上传转账凭证");
                         return false
                     }*/
                    this.dataset.loading = true;
                    var url = '/api/admin/tixian/confirm',
                        params = {
                            id: this.curSureRow.id,
                            pic: this.curSureRow.url
                        };

                    this.$util.postRequestInterface(url, params, {
                        success: (res) => {
                            Message.success("成功");
                            _this.dataset.loading = false;
                            _this.controllerRequestListDataset();
                        },
                        complete: (e) => {

                            this.dataset.loading = false;
                        }
                    });
                }

                this.dialogVisible = status;
                this.curSureRow = {
                    id: "",
                    url: "",
                    remark: "",
                    host: "http://lj.hbweipai.com"
                }
            },
            handleAvatarSuccess(res, file) {
                console.log('file ', res)
                this.curSureRow.url = this.curSureRow.host + res.data;
            },
            //驳回
            rejectApply(id) {
                let _this = this;
                MessageBox.prompt('请输入驳回原因', '驳回原因', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请输入驳回原因'

                }).then(({value}) => {
                    this.dataset.loading = true;
                    var url = '/api/admin/tixian/reject',
                        params = {
                            id: id,
                            remark: value
                        };

                    this.$util.postRequestInterface(url, params, {
                        success: (res) => {
                            Message.success("驳回成功");
                            _this.dataset.loading = false;
                            _this.controllerRequestListDataset();
                        },
                        complete: (e) => {
                            this.dataset.loading = false;
                        }
                    });

                }).catch(() => {

                    Message.info('取消输入')
                });
            },
            controllerRequestListDataset(page) {
                if (this.dataset.loading) return; else this.dataset.loading = true;
                if (page) this.dataset.page = page;

                var url = '/api/admin/tixian/getlist',
                    params = {
                        page: this.dataset.page - 1,
                        list_rows: this.dataset.limit,
                        operation: 1,
                        status: this.options.mode,
                        // end_time:0,
                        // start_time:0,
                        // userid: JSON.parse(window.sessionStorage.getItem("user")).uid
                    };

                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        this.dataset.total = res.data.count;
                        this.dataset.items = res.data.data;
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventUpdateRequestLimit(limit) {
                if (this.dataset.loading) return;

                this.dataset.limit = limit;
                this.dataset.page = 0;
                this.dataset.total = 0;

                this.controllerRequestListDataset();
            },
            eventOnButtonOperate(mode, index) {
                this.drawer.handle = mode;

                switch (mode) {
                    case 'details':
                        var baseUrl = window.location.protocol + "//" + window.location.hostname,
                            item = this.dataset.items[index],
                            url = '/res/auto-login.html?token=' + this.$store.state.options.user.token;

                        if (window.location.port != 80 || window.location.port) {
                            // baseUrl += ':' + window.location.port;
                            baseUrl += ':' + 8089;
                        }

                        url += '&name=' + item.name;
                        url += '&phone=' + item.phone;
                        url += '&key=' + this.drawer.lastToken;

                        this.drawer.url = baseUrl + url;

                        this.drawer.lastToken = item.token;

                        this.drawer.show = true;
                        break;
                }
            }
        },
        watch: {
            'options.mode'(nVal, oVal) {
                this.options.mode = nVal;

                this.controllerRequestListDataset();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select-width {
        width: 30vw;
    }

    .drawer-container {
        padding: 3.2rem;
    }

    .user-details {
        width: 414px;
        height: 736px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

